<div class="modal-header">
  <h4 class="modal-title">Product Details</h4>
  <button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<div>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#overview" role="tab"
        >Overview</a
      >
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#description" role="tab"
        >Description</a
      >
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#images" role="tab">Images</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#details" role="tab"
        >Details</a
      >
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#shipping" role="tab"
        >Shipping</a
      >
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active p-3" id="overview" role="tabpanel">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Product Name:</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            th:value="${product.name}"
            readonly
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Alias:</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            th:value="${product.alias}"
            readonly
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Brand:</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            th:value="${product.brand.name}"
            readonly
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Category:</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            th:value="${product.category.name}"
            readonly
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Enabled:</label>
        <div class="col-sm-10">
          <input
            type="checkbox"
            th:checked="${product.enabled}"
            onclick="return false;"
          />
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">In-Stock:</label>
        <div class="col-sm-10">
          <input
            type="checkbox"
            th:checked="${product.isInStock}"
            onclick="return false;"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Cost:</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            th:value="${product.cost}"
            readonly
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Price:</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            th:value="${product.price}"
            readonly
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Discount:</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            th:value="${product.discountPercentage}"
            readonly
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Updated Time:</label>
        <div class="col-sm-10">
          <span
            th:text="${#dates.format(product.updatedAt, 'yyyy-MM-dd HH:mm:ss')}"
          ></span>
        </div>
      </div>
    </div>

    <div class="tab-pane" id="description" role="tabpanel">
      <div th:replace="products/product_description_readonly :: content"></div>
    </div>

    <div class="tab-pane" id="images" role="tabpanel">
      <div th:replace="products/product_images_readonly :: content"></div>
    </div>
    <div class="tab-pane p-3" id="details" role="tabpanel">
      <div th:replace="products/product_details_readonly :: content"></div>
    </div>
    <div class="tab-pane p-3" id="shipping" role="tabpanel">
      <div th:replace="products/product_shipping_readonly :: content"></div>
    </div>
  </div>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-danger" data-dismiss="modal">
    Close
  </button>
</div>
